<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>时钟</title>
    <style type="text/css">
        html,
        body,
        ul {
            margin: 0;
            padding: 0;
        }

        .clock {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 252px;
            height: 252px;
            background-color: #ccc;
            border-radius: 50px;
        }

        .dial {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 220px;
            height: 220px;
            border-radius: 50%;
            background-color: #fff;
        }

        .clock .num {
            list-style: none;
            width: 26px;
            position: absolute;
            left: 50%;
            margin-left: -13px;
            font-weight: 800;
            text-align: center;
            transform-origin: 13px 110px;
        }

        .num span {
            display: inline-block;
        }

        #point {
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background: #000000;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }

        #hour {
            width: 4px;
            height: 70px;
            background: #000000;
            position: absolute;
            top: 40px;
            left: 50%;
            transform: translate(-50%, 0) rotate(10deg);
            transform-origin: 2px 70px;
            border-radius: 2px;
        }

        #min {
            width: 4px;
            height: 80px;
            background: #000000;
            position: absolute;
            top: 30px;
            left: 50%;
            transform-origin: 2px 80px;
            border-radius: 2px;
        }

        #sec {
            width: 2px;
            height: 100px;
            background: #FF8900;
            position: absolute;
            top: -10px;
            left: 50%;
            transform-origin: 1px 100px;
            border-radius: 1px;
        }
    </style>
    <script>
        window.onload = function () {

            // 设置 时间位置
            var lis = document.getElementsByClassName('num');
            for (let i = 0; i < lis.length; i++) {
                lis[i].style.transform = "rotate(" + (i + 1) * 30 + "deg" + ")";
            }
            var spans = document.getElementsByTagName('span');
            for (let i = 0; i < spans.length; i++) {
                spans[i].style.transform = "rotate(-" + (i + 1) * 30 + "deg" + ")";
            }
            update_pointer();


            function update_pointer() {
                var date = new Date();
                var hour = date.getHours();
                var min = date.getMinutes();

                var sec = date.getSeconds() + date.getMilliseconds() / 1000;
                var h = document.getElementById("hour");
                var m = document.getElementById("min");
                var s = document.getElementById("sec");
                s.style.transform = "translate(-50%,20px) rotate(" + (sec) * 6 + "deg" + ")";
                m.style.transform = "translateX(-50%) rotate(" + (min + sec / 60) * 6 + "deg" + ")";
                h.style.transform = "translateX(-50%) rotate(" + (hour - 12) * 30 + "deg" + ")";
                console.log("当前时间", date);

                setTimeout(update_pointer, 1000 / 60);
            }
        }
    </script>
</head>

<body>
    <div class="clock">
        <ul class="dial">
            <li class="num"><span>1</span></li>
            <li class="num"><span>2</span></li>
            <li class="num"><span>3</span></li>
            <li class="num"><span>4</span></li>
            <li class="num"><span>5</span></li>
            <li class="num"><span>6</span></li>
            <li class="num"><span>7</span></li>
            <li class="num"><span>8</span></li>
            <li class="num"><span>9</span></li>
            <li class="num"><span>10</span></li>
            <li class="num"><span>11</span></li>
            <li class="num"><span>12</span></li>
            <div id="point"></div>
            <div id="hour"></div>
            <div id="min"></div>
            <div id="sec"></div>
        </ul>
    </div>
</body>

</html>